<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.bundle.js"></script>
    <style>
        .btn {
            border-radius: 25px;
            font-size: 15px;

        }

        body {
            background-image: url(./images/bg.jpg );
        }

        #carouselExampleCaptions .carousel-caption {
            bottom: 0px;
            left: 0px;
            right: 0px;
            padding: 0px;
            text-align: left;
            background-color: linear-gradient(rgba(225, 225, 225, 0), rgba(225, 0, 0, 1)) !important;
        }

        #carouselExampleCaptions .carousel-indicators {
            left: 0;
            right: 0;
            margin: 0;
            background-color: rgba(225, 225, 225, .1);

        }

        #carouselExampleCaptions .carousel-indicators li {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin: 0 3px;
        }

        #carouselExampleCaptions .carousel-indicators li.active {
            width: 16px;
            border-radius: 50rem;
            border: 0px;
        }

        #carouselExampleFade {
            width: 800px;
            height: 700px;
        }

        #header-hei {
            font-size: 14px;
        }

        #header-tui {
            font-size: 12px;
            padding-top: 8px;
            padding-bottom: 0px;
        }

        #weiwei {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div style="background-color: #f1f1f1;">
        <!--头部-->
        <div style="background-color: #1f1f1f; ">
            <div class="container w-100 " id="header-hei">
                <ul class="class ">
                    <div class="row d-flex justify-content-between">
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href="22.html">我的音乐</a></li>
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href=""><div class="dropdown show">
                                    <a class="btn btn-dark dropdown-toggle" style="margin-bottom: 0px;" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      发现音乐
                                    </a>
                                  
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                      <a class="dropdown-item" href="#">其他音乐</a>
                                      <a class="dropdown-item" href="#">热门音乐</a>
                                    </div>
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href="">关注</a>
                        </li>
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href="">商城</a>
                        </li>
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href="">音乐人</a></li>
                        <li class="list-inline-item py-3 px-1" style="margin-top: 9px;"><a class="text-white"
                                href="">推歌</a>
                        </li>

                        <!--搜索框-->
                        <form class="form-inline my-4 mx-3 my-lg-0">
                            <div class="input-group-append" style="margin-top: 9px;">
                                <input class="form-control mr-sm-2 " style="margin-top: 9px;" type="search "
                                    placeholder="搜索" aria-label="Search">

                                <button class=" btn btn-outline my-sm-0 border-white text-white"><small>创作者中心</small>
                                </button>
                                <button class=" btn btn-outline  my-sm-1 border-auto text-white">
                                    <small><a class="text-white " style="margin-top: 9px;"
                                            href="denglu.html">登录</a></small>
                                </button>
                        </form>
                    </div>
                </ul>
            </div><!--推荐栏-->
            <div style="background-color: #b30404; ">
                <div class="container justify-content-between " id="header-tui">
                    <div class="row bg-auto">
                        <ul class="class">
                            <li class="list-inline-item  px-5"><a class="text-white" href="">推荐</a>
                            </li>
                            <li class="list-inline-item  px-5"><a class="text-white" href="">排行榜</a>
                            </li>
                            <li class="list-inline-item  px-5"><a class="text-white" href="">歌单</a>
                            </li>
                            <li class="list-inline-item  px-5"><a class="text-white" href="">播客</a>
                            </li>
                            <li class="list-inline-item  px-5"><a class="text-white" href="">歌手</a>
                            </li>
                            <li class="list-inline-item  px-5"><a class="text-white" href="">新碟上架</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--轮播图-->
        <div class="container">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <div class="d-flex justify-content-center position-absolute" style="bottom:0px;left:0;right:0;">
                    <ol class="carousel-indicators align-items-center position-relative rounded-pill px-2">
                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li>
                    </ol>
                </div>
                <div class="carousel-inner" style="height: 400px;width: 1110px;">
                    <div class="carousel-item active">
                        <img src="./img/1.png" class="d-block w-100" alt="...">

                    </div>
                    <div class="carousel-item">
                        <img src="./img/2.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/3.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./img/4.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                        </div>
                    </div>
                </div>
                <button class="btn bg-white px-1 py-2 position-absolute" style="top:35%;left:1px"
                    data-target="#carouselExampleCaptions" data-slide="prev">
                    <i class="bi bi-caret-left-fill"></i>
                </button>

                <button class="btn bg-white px-1 py-2 position-absolute" style="top:35%;right:1px"
                    data-target="#carouselExampleCaptions" data-slide="next">
                    <i class="bi bi-caret-right-fill"></i>
                </button>
            </div>
        </div>


        <!--音乐卡片-->
        <div class="container mt-1 bg-white border">
            <!--热门推荐栏-->
            <div class="col my-3 border-bottom border-danger">
                <h5><strong>热门推荐</strong></h5>
            </div>
            <div class="container mt-5 ">
                <div class="row">
                    <div class="col">
                        <div class="row px-3">
                            <div class="col-3">
                                <div class="card mb-5 border-0">
                                    <img src="http://p1.music.126.net/6eIG5kB52Uf87RbT58qtjw==/109951167081793683.jpg?param=140y140"
                                        class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <a href="11.html" class="text-dark">
                                            <p class="card-text">华语青春|90后校园岁月的流行歌曲
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card mb-5 border-0">
                                    <img src="http://p1.music.126.net/WjDAZ9C8whAB6yfE_sfIFw==/109951163244980773.jpg?param=140y140"
                                        class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <a href="#" class="text-dark">
                                            <p class="card-text">致回不去的校园，致那些美好的曾经
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card mb-5 border-0">
                                    <img src="http://p1.music.126.net/zAuVCW-cUvn29s9IxuQh-w==/109951167071306612.jpg?param=140y140"
                                        class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <a href="#" class="text-dark">
                                            <p class="card-text">经典粤语合集【无损音质】黑胶唱片会员专属
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="card mb-5 border-0">
                                    <img src="http://p1.music.126.net/ljxT6mYRLTb2-VjJZXx5Eg==/109951169169660227.jpg?param=140y140"
                                        class="card-img-top" alt="...">
                                    <div class="card-body">
                                        <a href="#" class="text-dark">
                                            <p class="card-text">
                                                国产说唱|你的中文说唱旋律精选
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row px-3">
                            <div class="col-3">
                                <div class="card mb-5 border-0">
                                    <img src="http://p2.music.126.net/vuPDRsBSPjjRUG2D_CGngw==/109951162933606208.jpg?param=140y140"
                                        class="card-img-top" alt="...">
                                    <a href="#" class="text-dark">
                                        <div class="card-body">
                                            <p class="card-text">【一百首】经典话语怀旧老歌
                                            </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card mb-5 border-0">
                                <img src="http://p1.music.126.net/8Dx9VCBl-zTuOzH_Yi-gnQ==/109951171114179725.jpg?param=140y140"
                                    class="card-img-top" alt="...">
                                <div class="card-body">
                                    <a href="#" class="text-dark">
                                        <p class="card-text">【苏童】聊《好天气》在线水塘斑驳
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card mb-5 border-0">
                                <img src="http://p1.music.126.net/hvDkoX0nTR4AjgRuaRui5g==/109951171066160167.jpg?param=140y140"
                                    class="card-img-top" alt="...">
                                <div class="card-body">
                                    <a href="#" class="text-dark">
                                        <p class="card-text">珠玉-方大同第二弹（15live）
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card mb-5 border-0">
                                <img src="http://p1.music.126.net/taOD4sX9oG0RWeu3bwZz_w==/109951168679684189.jpg?imageView=1&thumbnail=800y800&enlarge=1%7CimageView=1&watermark&type=1&image=b2JqL3c1bkRrTUtRd3JMRGpEekNtOE9tLzU5ODcxOTE3NTk3LzRiMmYvMjAyNTQ5MTg1MTYveDgxMTE3NDY3ODUxMTYwOTkucG5n&dx=0&dy=0%7Cwatermark&type=1&image=b2JqL3dvbkRsc0tVd3JMQ2xHakNtOEt4LzI3NjEwNDk3MDYyL2VlOTMvOTIxYS82NjE4LzdhMDc5ZDg0NTYyMDAwZmVkZWJmMjVjYjE4NjhkOWEzLnBuZw==&dx=0&dy=0%7CimageView=1&thumbnail=140y140&?param=140y140"
                                    class="card-img-top" alt="...">
                                <div class="card-body">
                                    <a href="#" class="text-dark">
                                        <p class="card-text">重返2007 | 从我怀念的开始
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-3">
                    <p><strong>入驻歌手</strong></p>
                    <div class="media">
                        <img src="http://p2.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=62y62"
                            class="mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0">张惠妹aMEI</h6>
                            <p><small>台湾歌手张惠妹</small>
                            </p>
                        </div>
                    </div>
                    <div class="media">
                        <img src="http://p2.music.126.net/FRjXcFEflJMI0UBFauC--g==/109951169959806190.jpg?param=62y62"
                            class="mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0">吴莫愁Momo</h6>
                            <p>《中国好声音》选手
                            </p>
                        </div>
                    </div>
                    <div class="media">
                        <img src="http://p2.music.126.net/whG7pbsbd1akKtOE7V3R_Q==/109951168299161319.jpg?param=62y62"
                            class="mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0">孙楠</h6>
                            <p>歌手孙楠
                            </p>
                        </div>
                    </div>
                    <div class="media">
                        <img src="http://p2.music.126.net/HXs1MIcM7n9V7qFDTuW71A==/109951170540755845.jpg?param=62y62"
                            class="mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0">陈楚生</h6>
                            <p>唱作歌手
                            </p>
                        </div>
                    </div>
                    <div class="media">
                        <img src="http://p2.music.126.net/1GIlkxKmvKu66ufU83FyvA==/31885837222663.jpg?param=62y62"
                            class="mr-3 w-25" alt="...">
                        <div class="media-body">
                            <h6 class="mt-0">麦田老狼</h6>
                            <p><small>歌手，音乐人</small>
                            </p>
                        </div>
                    </div>
                    <div class="col d-flex justify-content-between">
                        <button type="button" class="btn btn border border-dark my-3 "><small>申请成为网易音乐人</small></button>
                    </div>
                    <h6>热门主播</h6>
                    <ol class="breadcrumb bg-white">
                        <li class="breadcrumb-item"><a href="#" class="text-info small">陈立</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">刘维，Julius</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">墨菲定律乐团</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">嘴碎许美达</a></li>
                        <li class="breadcrumb-item"><a href="#" class="text-info small">银临Rachel</a></li>
                    </ol>
                </div>

            </div>
        </div>

    </div>
    <!--尾栏-->
    <div style="background-color: #444444;">
        <div class="container py-3">
            <div class="col d-flex justify-content-center text-secondary" id="weiwei"><small>
                    <p> 服务条款| 隐私政策| 儿童隐私政策| 版权投诉| 投资者关系| 广告合作 |联系我们</p>
                    <div class="col d-flex justify-content-center text-white" id="weiwei"><small>
                    </div>
                    <p>互联网宗教信息服务许可证：浙（2022）0000120 增值电信业务经营许可证：浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4
                        工业和信息化部备案管理系统网站
                    </p>
            </div>
            </small>
        </div>
    </div>
</body>

</html>